<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>URL参数前缀拼接工具</title>
		<link
			href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css"
			rel="stylesheet"
		/>
	</head>
	<body>
		<div class="container py-5">
			<h3 class="mb-4">URL参数前缀拼接工具</h3>
			<div class="mb-3">
				<label for="inputParams" class="form-label">原始URL参数</label>
				<textarea
					class="form-control"
					id="inputParams"
					rows="3"
					placeholder="如：code=123123123&data=34535&sesson=234234"
				></textarea>
			</div>
			<div class="mb-3">
				<label for="inputPrefix" class="form-label">前缀字符串</label>
				<input
					type="text"
					class="form-control"
					id="inputPrefix"
					placeholder="如：sso_"
				/>
			</div>
			<div class="mb-3">
				<label for="outputParams" class="form-label">带前缀的URL参数</label>
				<div class="input-group">
					<textarea
						class="form-control"
						id="outputParams"
						rows="3"
						readonly
					></textarea>
					<button class="btn btn-outline-secondary" type="button" id="copyButton" title="复制到剪贴板">
						复制
					</button>
				</div>
				<div class="form-text" id="copyMessage" style="display: none; color: green;">已复制到剪贴板！</div>
			</div>
		</div>
		<script>
			window.onload = () => {
				const localKey = 'jm_string_prefix';
				const inputParams = document.getElementById('inputParams');
				const inputPrefix = document.getElementById('inputPrefix');
				const outputParams = document.getElementById('outputParams');

				function addPrefixToParams(params, prefix) {
					if (!params.trim()) return '';
					return params
						.split('&')
						.map((pair) => {
							let [key, value] = pair.split('=');
							if (key && value !== undefined) {
								return prefix + key + '=' + value;
							}
							return pair;
						})
						.join('&');
				}

				function extractParamsFromUrl(input) {
					// 如果包含?，则提取?后面的部分
					const questionMarkIndex = input.indexOf('?');
					if (questionMarkIndex !== -1) {
						return input.substring(questionMarkIndex + 1);
					}
					// 如果包含#且在?之前，则忽略#及其后面的部分
					const hashIndex = input.indexOf('#');
					if (hashIndex !== -1) {
						return input.substring(0, hashIndex);
					}
					// 如果不包含?但可能是纯参数字符串，则直接返回
					return input;
				}

				function updateOutput() {
					const inputValue = inputParams.value;
					const extractedParams = extractParamsFromUrl(inputValue);
					const params = decodeURIComponent(extractedParams);
					const prefix = inputPrefix.value;
					outputParams.value = addPrefixToParams(params, prefix);
					window.localStorage.setItem(
						localKey,
						JSON.stringify({
							value: inputParams.value,
							prefix,
						})
					);
				}

				// 复制到剪贴板功能
				const copyButton = document.getElementById('copyButton');
				const copyMessage = document.getElementById('copyMessage');
				
				copyButton.addEventListener('click', () => {
					// 选择文本
					outputParams.select();
					
					// 复制到剪贴板
					navigator.clipboard.writeText(outputParams.value)
						.then(() => {
							// 显示成功消息
							copyMessage.style.display = 'block';
							
							// 3秒后隐藏消息
							setTimeout(() => {
								copyMessage.style.display = 'none';
							}, 3000);
						})
						.catch(err => {
							console.error('复制失败:', err);
							alert('复制失败，请手动复制');
						});
				});

				inputParams.addEventListener('input', updateOutput);
				inputPrefix.addEventListener('input', updateOutput);
				const store = JSON.parse(window.localStorage.getItem(localKey) || '{}');

				// 可选：初始化默认值
				inputParams.value = store.value || '';
				inputPrefix.value = store.prefix || '';
				updateOutput();
			};
		</script>
	</body>
</html>